<template>
    <div class="box-container">
        <div class="outer-box">
          <div
          class="box"
          v-for="(item, index) in props.parent.child"
          :key="index"
          :class="getPartsStatus(item.serial_no,index.toString(),item.sw_ver,item.hw_ver)"
          >
          <span class="inner-box" >
            {{item.description}}
            <q-tooltip 
             class="bg-indigo" :offset="[10, 10]">
              {{ getPartsStatus(item.serial_no,index.toString(),item.sw_ver,item.hw_ver) }}
            </q-tooltip>
          </span>
        </div>
      </div>
      <!-- <q-dialog persistent>
        <PartsMasterEditComponent :edited-row="part"></PartsMasterEditComponent>
      </q-dialog> -->
    </div>
</template>

<script setup lang="ts">
import { Parent } from 'src/services/type';
import { getPartsStatus } from '../utils/getPublic';

const props = defineProps<{
    parent: Parent
}>()

</script>

<style scoped>
.box {
  display: inline-table;
  min-height: 150px;
  width: 25px;
  margin: 1px;
  color: black;
  border: solid black 1px;
}

.inner-box {
  writing-mode: vertical-lr;
  text-orientation: upright;
  font-size: 0.5rem;
  max-height: 120px;
  overflow: auto;
}
::-webkit-scrollbar {
  width: 0.2rem;
}

::-webkit-scrollbar-track {
  background-color: #a5b1a7;  
}

.outer-box {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  border-radius: 10px;
  margin: 5px;
  position: relative;
}

.box-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

</style>
